import React, { Component } from 'react'
import store from '../store'
import { Skeleton, Switch, Card, Avatar, Row, Col, Icon } from 'antd';
// import {MINUS,PLUS,RESET,TOGGLE_LOADING} from '../store/actionTypes'
import {minus,plus,reset,toggle_loading} from '../store/actions'

const { Meta } = Card;

export default
    class Counter extends Component {
    constructor(props) {
        super(props)
        console.dir(store)
        this.state = store.getState()
        this.storeChange = this.storeChange.bind(this)  //转变this指向
        store.subscribe(this.storeChange) //订阅Redux的状态
    }
    /**订阅Redux的状态 */
    storeChange() {
        this.setState(store.getState())
    }
    onChange = checked => {
        store.dispatch(toggle_loading(!checked))
    };

    plus = () => {
        store.dispatch(plus())
    }

    minus = () => {
        store.dispatch(minus())
    }

    reset = () => {
        store.dispatch(reset(0))
    }

    render() {
        const { loading } = this.state;
        return (<Row>
            <Col span={12}>
                <Switch checked={!loading} onChange={this.onChange} />
                <Card
                    style={{ width: 300, marginTop: 16 }}
                    actions={[
                        <Icon type="plus-square" key="setting" onClick={this.plus} />,
                        <Icon type="minus-square" key="edit" onClick={this.minus} />,
                        <Icon type="info-circle" key="ellipsis" onClick={this.reset} />,
                    ]}
                >
                    <Skeleton loading={loading} avatar active>
                        <Meta
                            avatar={
                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            }
                            title="计数器"
                            description={'经过了' + this.state.count}
                        />
                    </Skeleton>
                </Card>
            </Col>
        </Row>)
    }
}
